<template>
  <div class="chat-contrainer">
      <div v-for="item in cards" :key="item.Friendid" @click="enterChat(item.Friendid)"> 
        <n-card bordered size="large" >
            
            <div class="avatar-part float-left">
                <n-badge :value="item.messagenumber">
                    <n-avatar :src=item.avatar size="large"></n-avatar>
                </n-badge>
            </div>
            <div class="body-part float-left">
                <div class="friend-name">{{item.Friendname}}</div>
                <div class="friend-msg">{{item.messagetype}}</div>
            </div>
            <div class="mark-part float-right">
                <small>{{item.lastmsgtime}}</small>
                
            </div>
        </n-card>
      </div>

  </div>
</template>

<script>
import {reactive, onMounted, getCurrentInstance} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {NCard, NAvatar, NSpace, NBadge} from 'naive-ui'
export default {

    components:{
        NCard, NAvatar,NSpace,NBadge
    },
    setup(){

        // const route = useRoute()
        const router = useRouter()
        const {proxy} = getCurrentInstance()
        //获取登录信息 
        // let userinfo = route.params
        // console.log(userinfo.id)
        // localStorage.setItem('userinfo', JSON.stringify(userinfo))
        // let cards = reactive([{
        //     id:1,
        //     avatar:'',
        //     nickname:'',
        //     lastmsgtime:'',
        //     messagetype:'',
        //     messagenumber:''
        // }])
        // {
        //     id:2,
        //     avatar:'../assets/logo.png',
        //     nickname:'gcc',
        //     lastmsgtime:'刚刚',
        //     messagetype:'你不是说你睡了吗？',
        //     messagenumber:'99+'
        // }
        // ])
        let cards = reactive([])
        onMounted(()=>{
            // console.log(localStorage.getItem('userinfo'))
            let userinfoFromLocalStorge = JSON.parse(localStorage.getItem('userinfo'))
            // console.log(userinfoFromLocalStorge)
            let url = '/v1/contact/friend/'+userinfoFromLocalStorge.id
            proxy.$axios.get(url).then((response)=>{
                // console.log(response.data.data)
                cards.push (...response.data.data)
               
                
                
            }).catch((error)=>{
                console.log(error)
            })
        })

        const enterChat = (id)=>{
            router.push({name:'MainChatContent', params:{id:id}})
        }

        
        return {
            cards,
            enterChat
        }
    }
}
</script>

<style scoped>
    .float-left{
        float: left;
    }
    .float-right{
        float: right;
    }
    .body-part{
        /* border: 2px solid ; */
        margin-left: 15px;
    }
    .friend-name{
        text-align: left;
        font-size: 20px;
        
    }
    .mark-part{
        margin-right: 10px;
    }
    
</style>